<script setup>
import { toPage } from '../public.js'

defineProps({
    list: {
        type: Array,
        default: []
    }
})
</script>

<template>
    <div class='one_box'>
        <div class="one_item" @click="toPage(item)" v-for="item of list">
            <img :src="item?.imageIconUrl" mode="aspectFit" class="one_item_icon" alt="">
            <img :src="item?.imageUrl" mode="aspectFit" class="one_item_img" alt="">
        </div>
    </div>
</template>

<style lang='scss' scoped>
.one_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;



    .one_item {
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        width: 156rpx;
        height: 150rpx;

        .one_item_icon {
            position: absolute;
            right: -12rpx;
            top: -12rpx;
            width: 72rpx;
            height: 36rpx;
            z-index: 1;
        }

        .one_item_img {
            width: 100%;
            height: 100%;
            transform: rotateZ(360deg)
        }
    }
}
</style>